<table id="datagrid_${viewCode}"
    <#if htmlProps??>
        <#list htmlProps?keys as key>
            ${key}="${htmlProps[key]?string}"
        </#list>
    </#if>
></table>

<#if conditionFormCode?? || toolButtons??>
    <div id="datagrid_${viewCode}_toolbar">
        <#if conditionFormCode??>
            <div style="margin: 10px" class="form-builder-datagrid-toolbar">
                <@formBuilder type="form" code=conditionFormCode hideButton=true></@formBuilder>
            </div>
        </#if>
        <div>
            <#if searchButton??>
                <a
                    <#if (searchButton.id)??>
                        id="${viewCode}_${searchButton.id}"
                    </#if>
                    <#-- 如果没有class属性，则默认class为easyui-linkbutton -->
                    <#if (searchButton.class)??>
                    <#else>
                        class="easyui-linkbutton"
                    </#if>
                    <#-- 遍历所有属性   -->
                    <#list searchButton?keys as key>
                        ${key}="${searchButton[key]}";
                    </#list>
                >
                    <#if (searchButton.text)??>
                        ${searchButton.text}
                    <#else>
                        Search
                    </#if>
                </a>
            <#else>
                <a href="javascript:void(0)" id="datagrid_${viewCode}_searchButton" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
            </#if>
            <#if toolButtons??>
                <#list toolButtons as button>
                    <a
                        <#if (button.id)??>
                            id="${viewCode}_${button.id}"
                        </#if>
                        <#-- 如果没有class属性，则默认class为easyui-linkbutton -->
                        <#if (button.class)??>
                        <#else>
                            class="easyui-linkbutton"
                        </#if>
                        <#-- 遍历所有属性   -->
                        <#list button?keys as key>
                            ${key}="${button[key]}";
                        </#list>
                    >
                        <#if (button.text)??>
                            ${button.text}
                        <#else>
                            ButtonText
                        </#if>
                    </a>
                </#list>
            </#if>
        </div>

    </div>
</#if>

<#assign stringColumnProps = ["field", "title", "align", "halign", "order"]/>
<#assign stringGridProps = ["resizeHandle", "toolbar", "method", "idField", "url", "loadMsg",
    "pagePosition", "sortName", "sortOrder"]/>

<script type="text/javascript">
    $(function() {
        <#if !searchButton??>
            $("#datagrid_${viewCode}_searchButton").click(function() {
                reload_datagrid_${viewCode}();
            });
        </#if>
        <#if toolButtons??>
            <#list toolButtons as button>
                <#if (button.id)?? && (button.onclick)??>
                    $("#${viewCode}_${button.id}").click(function() {
                        ${button.onclick}();
                    });
                </#if>
            </#list>
        </#if>
    });

    $("#datagrid_${viewCode}").datagrid({
        <#if title??>
            title: "${title}",
        </#if>
        url: "${url}",
        columns: [[
            <#list columns as column>
                {
                    <#list column?keys as key>
                        <#if stringColumnProps?seq_contains(key)>
                            ${key}: "${column[key]?string}"
                        <#else>
                            ${key}: ${column[key]?string}
                        </#if>
                        <#if !key?is_last>
                            ,
                        </#if>
                    </#list>
                }
                <#if !column?is_last>
                    ,
                </#if>
            </#list>
        ]]
        <#if frozenColumns??>
            ,
            frozenColumns: [[
                <#list frozenColumns as column>
                    {
                        <#list column?keys as key>
                            <#if stringColumnProps?seq_contains(key)>
                                ${key}: "${column[key]?string}"
                            <#else>
                                ${key}: ${column[key]?string}
                            </#if>
                            <#if !key?is_last>
                                ,
                            </#if>
                        </#list>
                    }
                    <#if !column?is_last>
                        ,
                    </#if>
                </#list>
            ]]
        </#if>
        <#if gridProps??>
            ,
            <#if !(gridProps.toolbar)?? && conditionFormCode??>
                toolbar: "#datagrid_${viewCode}_toolbar",
            </#if>
            <#list gridProps?keys as key>
                <#if stringGridProps?seq_contains(key)>
                    ${key}: "${gridProps[key]?string}"
                <#else>
                    ${key}: ${gridProps[key]?string}
                </#if>
                <#if !key?is_last>
                    ,
                </#if>
            </#list>
        <#elseif conditionFormCode??>
            ,
            toolbar: "#datagrid_${viewCode}_toolbar"
        </#if>
    });

    //分页参数
    var datagrid_${viewCode}_pager = $("#datagrid_${viewCode}").datagrid('getPager');
    $(datagrid_${viewCode}_pager).pagination({
        pageSize: 10,//每页显示的记录条数，默认为10
        pageList: [10,20,50,100],//可以设置每页记录条数的列表
        beforePageText: '第',//页数文本框前显示的汉字
        afterPageText: '页    共 {pages} 页',
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    });


    //重新加载数据表格
    function reload_datagrid_${viewCode}() {
        let params = null;
        <#if conditionFormCode??>
            params = getFormData_${conditionFormCode}();
        </#if>

        if (params) {
            $("#datagrid_${viewCode}").datagrid('load', builder.removeStrictEmptyField(params));
        } else {
            $("#datagrid_${viewCode}").datagrid('load');
        }
    }
    
</script>